<template>
  <div>
    <div class="grid-box">
      <div class="grid-box-left cursor-pointer" @click="goInfo('income')">
        <div class="fill-box">
          <compare-last-year-item :imgPath="cashTotalIncome" title="预测现金流入" :normType="1" :isTop="true" :currentMoney="incomeModel.totalPlantPrice" :executeMoney="incomeModel.totalLastPlantPrice" :errorPercentage="incomeModel.totalPlantDeviationPrice"></compare-last-year-item>
        </div>
        <div class="grid-bottom">
          <div class="half-box">
            <compare-last-year-item title="预测经营活动现金流入" :normType="1" :currentMoney="incomeModel.itemDtos[0].totalPlantPrice" :executeMoney="incomeModel.itemDtos[0].totalLastPlantPrice" :errorPercentage="incomeModel.itemDtos[0].totalPlantDeviationPrice"></compare-last-year-item>
          </div>
          <div class="half-box">
            <compare-last-year-item title="预测非经营活动现金流入" :normType="1" :currentMoney="incomeModel.itemDtos[1].totalPlantPrice" :executeMoney="incomeModel.itemDtos[1].totalLastPlantPrice" :errorPercentage="incomeModel.itemDtos[1].totalPlantDeviationPrice"></compare-last-year-item>
          </div>
        </div>
      </div>
      <div class="grid-box-middle-line"></div>
      <div class="grid-box-left cursor-pointer" @click="goInfo('pay')">
        <div class="fill-box">
          <compare-last-year-item :imgPath="cashTotalPay" title="预测支出" :normType="2" :isTop="true" :currentMoney="payModel.totalPlantPrice" :executeMoney="payModel.totalLastPlantPrice" :errorPercentage="payModel.totalPlantDeviationPrice"></compare-last-year-item>
        </div>
        <div class="grid-bottom">
          <div class="half-box">
            <compare-last-year-item title="预测经营活动支出" :normType="2" :currentMoney="payModel.itemDtos[0].totalPlantPrice" :executeMoney="payModel.itemDtos[0].totalLastPlantPrice" :errorPercentage="payModel.itemDtos[0].totalPlantDeviationPrice"></compare-last-year-item>
          </div>
          <div class="half-box">
            <compare-last-year-item title="预测非经营活动支出" :normType="2" :currentMoney="payModel.itemDtos[1].totalPlantPrice" :executeMoney="payModel.itemDtos[1].totalLastPlantPrice" :errorPercentage="payModel.itemDtos[1].totalPlantDeviationPrice"></compare-last-year-item>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import compareLastYearItem from './compareLastYearItem.vue';
  import { apiForecastCashFlow } from '../../../api/businessManage';

  export default {
    props: {
      planType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        incomeModel: { itemDtos: [{}, {}] },
        payModel: { itemDtos: [{}, {}] },
        cashTotalIncome: require('@g/imgs/expenditure.png'),
        cashTotalPay: require('@g/imgs/income.png'),
      };
    },
    methods: {
      async getInfo() {
        let res = await apiForecastCashFlow({
          projectKeys: this.$route.query.projectKey ? [this.$route.query.projectKey] : null,
          year: this.$route.query.year,
        });

        this.incomeModel = res.rows.find(item => item.cashFlowBizType == 'inflow');
        this.payModel = res.rows.find(item => item.cashFlowBizType == 'outflow');
      },

      //去详情页
      goInfo(type) {
        let pathName = '';
        if (this.planType == 'year') {
          pathName = type == 'income' ? '/businessPlan/businessManage/yearIncome' : '/businessPlan/businessManage/yearPay';
        } else if (this.planType == 'compile') {
          pathName = type == 'income' ? '/businessPlan/businessManage/compileIncome' : '/businessPlan/businessManage/compilePay';
        }

        window.location.href = pathName + location.search
        
      },
    },

    mounted() {
      this.getInfo();
    },

    components: {
      compareLastYearItem,
    },
  };
</script>

<style lang="scss" scoped>
  .fill-box {
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .grid-box {
    display: flex;
    justify-content: flex-start;
    .grid-box-left,
    .grid-box-right {
      margin-top: 10px;
      padding-bottom: 10px;
      width: 50%;
      .grid-bottom {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
      }
    }
    .grid-box-left:hover,
    .grid-box-right:hover {
      box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.15);
    }

    .grid-box-middle-line {
      width: 1px;
      background: #e5e5e5;
      height: 270px;
      margin: 10px 20px 0;
    }
  }
  .half-box {
    width: 48%;
  }
</style>
